<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/online.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/public/logo.png" alt="" class="logo">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li class="check"><a href="javascript:;">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容">
                <img src="../img/public/search.png" alt="">
            </div>
            <div class="login">
                <a href="javascript:;">登陆</a>
                /
                <a href="javascript:;">注册</a>
            </div>
            <div class="user">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li>课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li>个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <div class="row">
            <div class="left">热门城市</div>
            <div class="right">
                <ul class="sel" type="area" id="area">
                    <li><a class="active">不限</a></li>
                    <!-- <li><a>北京</a></li>
                    <li><a>上海</a></li>
                    <li><a>江苏</a></li>
                    <li><a>济南</a></li>
                    <li><a>河南</a></li>
                    <li><a>天津</a></li>
                    <li><a>沈阳</a></li>
                    <li><a>石家庄</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按年级选择</div>
            <div class="right">
                <ul class="sel" type="grade" id="grade">
                    <li value=""><a class="active">不限</a></li>
                    <!-- <li><a>一年级</a></li>
                    <li><a>二年级</a></li>
                    <li><a>三年级</a></li>
                    <li><a>四年级</a></li>
                    <li><a>五年级</a></li>
                    <li><a>六年级</a></li>
                    <li><a>初一</a></li>
                    <li><a>初二</a></li>
                    <li><a>初三</a></li>
                    <li><a>高一</a></li>
                    <li><a>高二</a></li>
                    <li><a>高三</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按学科选择</div>
            <div class="right">
                <ul class="sel" type="subject" id="subject">
                    <li value=""><a class="active">不限</a></li>
                    <!-- <li><a>语文</a></li>
                    <li><a>数学</a></li>
                    <li><a>英语</a></li>
                    <li><a>生物</a></li>
                    <li><a>历史</a></li>
                    <li><a>政治</a></li>
                    <li><a>物理</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按类别选择</div>
            <div class="right">
                <ul class="sel" type="ver" id="ver">
                    <li value=""><a class="active">不限</a></li>
                    <!-- <li><a class="active">期中</a></li>
                    <li><a>期末</a></li>
                    <li><a>小升初</a></li> -->
                </ul>
            </div>
        </div>
        <div class="lesson">
            <ul>
                <!-- <li>
                    <div class="top">
                        <img src="../img/online/banner1-1.png" alt="" class="m">
                        <p>学科：英语</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>人教版语文第一节课程内容讲解</span>
                            <span class="time">地区：北京</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> -->
            </ul>
        </div>

        <div class="pageNum">
            <!-- <button>上一页</button> -->
            <ul class="sel" type="page">
                <!-- <li class="hui">上一页</li>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>下一页</li> -->
            </ul>
            <!-- <button class="active">下一页</button> -->
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

    <script src="../common/jquery.min.js"></script>
    <script src="../common/myajax.js"></script>
    <script>
        // 渲染地区
        async function getArea(){
            let [,{result}] = await myAjax({
                url:'api/area'
            })
            // console.log(result);
            let html = ''
            result.forEach(item => {
                html +=`<li val='${item.area_name}'><a>${item.area_name}</a></li>`
            });
            $('#area').append(html)
        }
        getArea();

        // 渲染年级
        async function getGrade(){
            let [,{result}] = await myAjax({
                url:'api/grade'
            })
            // console.log(result);
            let html = ''
            result.forEach(item => {
                html +=`<li val='${item.grade_name}'><a>${item.grade_name}</a></li>`
            });
            $('#grade').append(html)
        }
        getGrade()
        // 渲染科目
        async function getSubject(){
            let [,{result}] = await myAjax({
                url:'api/subject'
            })

            let html = ''
            result.forEach(item => {
                html +=`<li val='${item.subject_name}'><a>${item.subject_name}</a></li>`
            });
            $('#subject').append(html)
        }
        getSubject()
        // 渲染版本
        async function getVer(){
            let [,{result}] = await myAjax({
                url:'api/ver'
            })
            // console.log(result3);
            let html = ''
            result.forEach(item => {
                html +=`<li val='${item.type_name}'><a>${item.type_name}</a></li>`
            });
            $('#ver').append(html)
        }
        getVer()
        

        // 渲染数据
        let initdate={}
        async function getCourse({page=1,pagenum=6,area='',grade='',subject='',typename=''}){
            let [,result]= await myAjax({
                url:'api/coureslist',
                data:{
                    page,
                    pagenum,
                    area,
                    grade,
                    subject,
                    typename
                }
            })
            // console.log(result);
            let {allpage,result:data}=result;
            if(allpage==0){
            $('.lesson ul').html('<p style="text-align:center;font-size:24px">暂无数据</p>')
            $('.pageNum ul').html('')
            return;
            }
            let html = ''
            data.forEach(item=>{
                html += `<li cid="${item.cid}">
                            <div class="top">
                                <img src="${item.imgge_src}" alt="" class="m">
                                <p>学科：${item.subject_name}</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>${item.title}</span>
                                    <span class="time">地区：${item.area_name}</span>
                                </div>
                                <div class="right">${item.price==0 ? '免费学习':`${item.price}元`}</div>
                            </div>
                        </li>`
            })
            $('.lesson ul').html(html)

            // 渲染页码
            let pagehtml = '';
            let perv = (Number(page)-1)<1 ? 1:Number(page);
            let next = (Number(page)+1)>allpage? allpage:Number(page)+1;
            // 设置上一页
            pagehtml += `<li val="${perv}"><a class=${page ==1?'hui':''}>上一页</a></li>`

            for(let i=1;i<=allpage;i++){
                pagehtml +=`<li val="${i}"><a class="${i==page ? 'active':''}">${i}</a></li>`
            }
            // 设置下一页
            pagehtml +=`<li val="${next}"><a class=${page == allpage?'hui':''}>下一页</a></li>`

            $('.pageNum ul').html(pagehtml)
        }
        getCourse(initdate)
        $('.sel').on('click','li',function(){
            
            // 给li的子节点加active属性
            $(this).children().addClass('active')
            // 给li 兄弟节点的子节点删除active属性
            $(this).siblings().children().removeClass('active');
            // 给li的父节点添加type属性 作为initdate的key
            let key = $(this).parent().attr('type')
            let values = $(this).attr('val')
            initdate[key]=values;
            // 如果initdate的key值不是page 则使page为1
            if(key !='page'){
                initdate.page =1
            }
            // console.log(initdate);
            getCourse(initdate);
        })

        // 数据被点击时  跳转到对应视频页面
        $('.lesson ul').on('click','li',function(){
            let cid = $(this).attr('cid');
            location =`./videoDetail.html?cid=${cid}`
        })
    </script>
</body>

</html>